/**
 *  Created by clz on
 *  Function:
 *  Desc:
 */
import React, {Component} from 'react';
import {View, StyleSheet, Animated, Easing, Button, Image,ToastAndroid} from 'react-native';
import Screen from '../utiles/Screen'
import PropTypes from 'prop-types';
import px2dp from "../../px2dp";
export default class AnimatedDemo extends Component {
    /**
     * 默认属性值
     * @type {{}}
     */
    static defaultProps = {
        name: "小红",
        age: 20,
        sex: "男"
    };
    /**
     * 属性类型(约束)
     * @type {{}}
     */
    static  propTypes = {
        name: PropTypes.string,
        age: PropTypes.number,
        sex: PropTypes.string.isRequired,
    };

    constructor(props) {
        super(props);
        this.state = {
            fadeOutOpacity: new Animated.Value(1),
            trans: new Animated.ValueXY({
                x: 0,
                y: 0
            }),
            rotation: new Animated.Value(0),
            scale: new Animated.Value(0),
            left: new Animated.Value(0)
        };
    }

    /**
     * 淡入淡出
     */
    opaCityHandle() {
        this.startOpaCity();
    }

    startOpaCity() {
        Animated.timing(this.state.fadeOutOpacity, {
            toValue: 0,
            duration: 2000,
            easing: Easing.linear//线性的渐变函数
        }).start();
    }

    // 位移
    TransleHandle() {
        this.startTrans()
    }

    startTrans() {
        Animated.timing(this.state.trans, {
            toValue: {
                x: 100,
                y: 100,
            },
            duration: 2000

        }).start();
    }

    /**
     * 旋转并且持续进行动画
     * @constructor
     */
    RotationHandle() {
        this._startRotate();
    }

    _startRotate() {
        this.state.rotation.setValue(0);
        Animated.timing(this.state.rotation, {
            toValue: 1,
            duration: 1000
        }).start(() => {
            this.RotationHandle()
        });
    }

    /**
     * 缩放+spring摩擦力
     */
    scaleHandle() {
        this.startScale();
    }

    startScale() {
        Animated.spring(this.state.scale, {
            toValue: 1,
            duration: 500,
            friction: 5,   //摩擦力(越小，振幅越大)
            tension: 1000 //拉力
        }).start()
    }

    /**
     * 滚动
     * @constructor
     */
    LeftHandle() {
        this.startLeft();
    }

    startLeft() {
        Animated.timing(this.state.left, {
            toValue: 1,
            duration: 3000
        }).start();
    }

    render() {
        return (
            <View style={styles.AnimatedDemo}>
                <Animated.View style={{justifyContent:'center',alignItems:'center',width:Screen.width,height:Screen.height/2,
                    opacity:this.state.fadeOutOpacity,
                    //可以修改成left，top,right,进行位移转换
                    bottom:this.state.left.interpolate({
                        inputRange:[0,1],
                        outputRange:[0,Screen.width/2]
                    }),
                    transform:[
                        // {
                        //     rotateX:this.state.rotation.interpolate({
                        //         inputRange:[0,1],
                        //         outputRange:['0deg','360deg']
                        //     })
                        // },
                        {translateX:this.state.trans.x},
                        {translateY:this.state.trans.y},
                        // {scale:this.state.scale}
                    ]
                }}>
                    <Image resizeMode="cover" style={{width:px2dp(80),height:px2dp(80)}} source = {require("../../image/reba.jpg")}/>
                </Animated.View>
                <Button
                    onPress={this.opaCityHandle.bind(this)}
                    title='淡入淡出'
                />
                <Button
                    onPress={this.TransleHandle.bind(this)}
                    title='位移'
                />
                <Button
                    onPress={this.RotationHandle.bind(this)}
                    title='旋转'
                />
                <Button
                    onPress={this.scaleHandle.bind(this)}
                    title='缩放'
                />
                <Button
                    onPress={this.LeftHandle.bind(this)}
                    title='滚动'
                />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    AnimatedDemo: {flex: 1}
});
